<template>
    <div>
        <pt-table url="article" :data="tableLiquor" ref="tableRef"></pt-table>
        <pt-form url="article" :rules="formRule" type="dialog" ref="formRef"></pt-form>
    </div>
</template>

<script lang="ts" setup>
import type { IFormConfig } from '@pangtou/form'
import type { ITable } from '@pangtou/table'
import { onMounted, ref } from 'vue'

const tableRef = ref()
const formRef = ref()
onMounted(() => {
    tableRef.value.action.setFormRef(formRef)
})

const options = [
    { label: '企业公告', value: 3, text: '企业公告', type: 'warning' },
    { label: '新闻资讯', value: 4, text: '新闻资讯' },
]
const tableLiquor: ITable = {
    header: {
        buttons: ['add', 'del', 'refresh', 'extend'],
        searchExtend: false,
    },
    column: [
        { type: 'index' },
        { prop: 'title', label: '文章标题' },
        { prop: 'category_id', label: '文章分类', render: 'tag', renderExtend: options },
        { prop: 'intro', label: '描述信息' },
        { prop: 'photo', label: '封面图片', render: 'image' },
        { label: '操作', width: '130', fixed: 'right', buttons: ['edit', 'del'] },
    ],
}

const formRule: IFormConfig = {
    title: '产品中心',
    col: 24,
    rules: [
        { field: 'title', col: 12, label: '文章标题', required: true },
        {
            field: 'category_id',
            label: '文章分类',
            type: 'select',
            col: 12,
            options: options,
            required: true,
        },
        { field: 'photo', label: '封面图片', col: 12, type: 'image' },
        { field: 'intro', label: '描述信息', col: 12, type: 'textarea' },
        { field: 'content', type: 'rich_text', label: '文章内容', required: true },
    ],
}
</script>

<style scoped lang="scss"></style>
